<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>收银下单 - fuint会员营销系统</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="fuint会员营销系统" name="description" />
    <meta content="fsq_better" name="author" />
    <link rel="icon" href="<@sp.static/>/assets/favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
    <link href="<@sp.static/>/assets/plugins/cashier/vendor.min.css" rel="stylesheet" />
    <link href="<@sp.static/>/assets/plugins/cashier/app.min.css" rel="stylesheet" />
</head>
<body class='pace-top'>

<!--
<div id="loader" class="app-loader">
<span class="spinner"></span>
</div>
-->

<div id="app" class="app app-content-full-height app-without-sidebar app-without-header bg-white">

<div id="content" class="app-content p-0">

<div class="pos pos-customer" id="pos-customer">

<div class="pos-menu">
<div class="logo">
<a href="/fuint-application/home">
<div class="logo-img"><img src="<@sp.static/>/assets/plugins/cashier/assets/logo.svg"/></div>
<div class="logo-text">收银下单</div>
</a>
</div>
<div class="nav-container">
<div data-scrollbar="true" data-height="100%" data-skip-mobile="true">
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="javascript:;" data-filter="all">
            <img class="cate-logo" src="<@sp.static/>/assets/plugins/cashier/assets/all-cate.svg"/> 全部商品
        </a>
    </li>
    <#list cateList as cate>
    <li class="nav-item">
        <a class="nav-link" href="javascript:;" data-filter="${cate.id}">
            <img class="cate-logo" src="${imagePath}${cate.logo}"/> ${cate.name}
        </a>
    </li>
    </#list>
</ul>
</div>
</div>
</div>
<div class="pos-content">
    <div class="product-nav">
        <div class="col-md-6">
            <input type="text" class="form-control goods-no" name="goodsNo" value="" placeholder="请输入商品条码"/>
            <button type="button" class="btn btn-success add-goods-no"><i class="fa fa-cart-plus"></i>添加购物车</button>
        </div>
        <div class="col-md-6">
            <button type="button" class="btn btn-danger clear-cart"><i class="fa fa-trash"></i>清空购物车</button>
        </div>
    </div>
    <div class="pos-content-container" data-scrollbar="true" data-height="100%" data-skip-mobile="true">
        <div class="product-row">
            <#list goodsList as goods>
            <div class="product-container" data-type="${goods.cateId}">
                <!--data-bs-toggle="modal" data-bs-target="#modalPosItem"-->
                <a href="javascript:;" class="product" data-id="${goods.id}">
                <div class="img" style="background-image: url(${imagePath}${goods.logo})"></div>
                    <div class="text">
                    <div class="title">${goods.name}</div>
                    <div class="desc">鸡排, 蛋, 酸汤, 沙拉</div>
                    <div class="price">￥${goods.price}</div>
                </div>
                </a>
            </div>
            </#list>
        </div>
    </div>
</div>


<div class="pos-sidebar" id="pos-sidebar">
<div class="pos-sidebar-header">
<div class="back-btn">
<button type="button" data-dismiss-class="pos-mobile-sidebar-toggled" data-target="#pos-customer" class="btn">
<svg viewBox="0 0 16 16" class="bi bi-chevron-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
</svg>
</button>
</div>
<div class="icon"><img src="<@sp.static/>/assets/plugins/cashier/assets/icon-table.svg" /></div>
<div class="title">海口解放路店</div>
<div class="order"><b>fuint</b></div>
</div>
<div class="pos-sidebar-nav">
<ul class="nav nav-tabs nav-fill">
<li class="nav-item">
<a class="nav-link active" href="javascript:;" data-bs-toggle="tab" data-bs-target="#newOrderTab">购物车</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:;" data-bs-toggle="tab" data-bs-target="#orderHistoryTab">订单列表</a>
</li>
</ul>
</div>
<div class="pos-sidebar-body tab-content" data-scrollbar="true" data-height="100%">
<div class="tab-pane fade h-100 show active" id="newOrderTab">
<div class="pos-table">
<div class="row pos-table-row">
<div class="col-9">
<div class="pos-product-thumb">
<div class="img" style="background-image: url(<@sp.static/>/uploadImages/20220110/856dbc96197e4782b4febb7a6e671bcb.jpg)"></div>
<div class="info">
<div class="title">简壳 一拖三可收纳伸缩充电线</div>
<div class="single-price">￥12.99</div>
<div class="desc">- size: large</div>
<div class="input-group qty">
<div class="input-group-append">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-minus"></i></a>
</div>
<input type="text" class="form-control" value="01" />
<div class="input-group-prepend">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 total-price">￥12.99</div>
</div>
<div class="row pos-table-row">
<div class="col-9">
<div class="pos-product-thumb">
<div class="img" style="background-image: url(<@sp.static/>/uploadImages/20220110/e641d7430df04c35a93a8238f5f6e312.jpg)"></div>
<div class="info">
<div class="title">小掌门刀具3件套</div>
<div class="single-price">￥5.00</div>
<div class="desc">
- size: large<br />
- less ice
</div>
<div class="input-group qty">
<div class="input-group-append">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-minus"></i></a>
</div>
<input type="text" class="form-control" value="02" />
<div class="input-group-prepend">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 total-price">￥10.00</div>
<div class="pos-remove-confirmation" style="display: none;">
    <svg width="2em" height="2em" viewBox="0 0 16 16" class="me-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
    </svg>
    移出购物车?
    <a href="javascript:;" class="btn btn-white ms-auto me-2">取消</a>
    <a href="javascript:;" class="btn btn-danger">确定</a>
</div>
</div>
<div class="row pos-table-row">
<div class="col-9">
<div class="pos-product-thumb">
<div class="img" style="background-image: url(<@sp.static/>/uploadImages/20220110/31cbf7ad0ef442a4b10dcefc24db0662.jpg)"></div>
<div class="info">
<div class="title">筷子便携餐盒3件套</div>
<div class="single-price">$10.99</div>
<div class="desc">
- size: large<br />
- spicy: medium
</div>
<div class="input-group qty">
<div class="input-group-append">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-minus"></i></a>
</div>
<input type="text" class="form-control" value="01" />
<div class="input-group-prepend">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 total-price">￥10.99</div>
</div>
<div class="row pos-table-row">
<div class="col-9">
<div class="pos-product-thumb">
<div class="img" style="background-image: url(<@sp.static/>/assets/plugins/cashier/assets/images/product-5.jpg)"></div>
<div class="info">
<div class="title">Hawaiian Pizza</div>
<div class="single-price">$15.00</div>
<div class="desc">
- size: large<br />
- more onion
</div>
<div class="input-group qty">
<div class="input-group-append">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-minus"></i></a>
</div>
<input type="text" class="form-control" value="01" />
<div class="input-group-prepend">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 total-price">$15.00</div>
</div>
<div class="row pos-table-row">
<div class="col-9">
<div class="pos-product-thumb">
<div class="img" style="background-image: url(<@sp.static/>/assets/plugins/cashier/assets/images/product-10.jpg)"></div>
<div class="info">
<div class="title">Mushroom Soup</div>
<div class="single-price">$3.99</div>
<div class="desc">
- size: large<br />
- more cheese
</div>
<div class="input-group qty">
<div class="input-group-append">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-minus"></i></a>
</div>
<input type="text" class="form-control" value="01" />
<div class="input-group-prepend">
<a href="javascript:;" class="btn btn-default"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 total-price">$3.99</div>
</div>
</div>
</div>
<div class="tab-pane fade h-100" id="orderHistoryTab">
<div class="h-100 d-flex align-items-center justify-content-center text-center p-20">
<div>
<div class="mb-3 mt-n5">
<svg width="6em" height="6em" viewBox="0 0 16 16" class="text-gray-300" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 5H2v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5zM1 4v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4H1z" />
<path d="M8 1.5A2.5 2.5 0 0 0 5.5 4h-1a3.5 3.5 0 1 1 7 0h-1A2.5 2.5 0 0 0 8 1.5z" />
</svg>
</div>
<h5>暂无订单信息</h5>
</div>
</div>
</div>
</div>
<div class="pos-sidebar-footer">
<div class="subtotal">
<div class="text">商品总价</div>
<div class="price">￥300.98</div>
</div>
<div class="taxes">
<div class="text">优惠金额</div>
<div class="price">￥20.12</div>
</div>
<div class="total">
<div class="text">应付金额</div>
<div class="price">￥288.10</div>
</div>
<div class="btn-row">
<a href="javascript:;" class="btn btn-success"><i class="fa fa-file-invoice-dollar fa-fw fa-lg"></i> 无商品收款</a>
<a href="javascript:;" class="btn btn-danger"><i class="fa fa-check fa-fw fa-lg"></i> 提交结算 </a>
</div>
</div>
</div>
</div>
<a href="javascript:;" class="pos-mobile-sidebar-toggler" data-toggle-class="pos-mobile-sidebar-toggled" data-target="#pos-customer">
<svg viewBox="0 0 16 16" class="img" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 5H2v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5zM1 4v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4H1z" />
<path d="M8 1.5A2.5 2.5 0 0 0 5.5 4h-1a3.5 3.5 0 1 1 7 0h-1A2.5 2.5 0 0 0 8 1.5z" />
</svg>
<span class="badge">5</span>
</a>

</div>
<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top" data-toggle="scroll-to-top"><i class="fa fa-angle-up"></i></a>
</div>

<!--弹框选择商品 start-->
<div class="modal modal-pos-item fade" id="modalPosItem">
    <div class="modal-dialog modal-lg modal-goods-info">
    <div class="modal-content">
    <div class="modal-body p-0">
    <a href="javascript:;" data-bs-dismiss="modal" class="btn-close position-absolute top-0 end-0 m-4"></a>
    <div class="pos-product">
    <div class="pos-product-img">
         <div class="img" id="modalGoodsLogo"></div>
    </div>
    <div class="pos-product-info">
    <div class="title" id="modalGoodsName"></div>
    <div class="desc" id="modalGoodsTips"></div>
    <div class="price" id="modalGoodsPrice">￥0.00</div>
    <hr />
    <div class="option-row">
    <div class="qty">
    <div class="input-group">
    <a href="javascript:;" class="btn btn-default"><i class="fa fa-minus"></i></a>
    <input type="text" class="form-control border-0 text-center" name="" value="1"/>
    <a href="javascript:;" class="btn btn-default"><i class="fa fa-plus"></i></a>
    </div>
    </div>
    </div>
    <div id="modalGoodsOptions" class="goods-options">
        <div class="option-row">
            <div class="option-title">型号</div>
            <div class="option-list">
                <div class="option">
                    <input type="radio" id="size3" name="size" class="option-input" checked />
                    <label class="option-label" for="size3">
                    <span class="option-text">小号</span>
                    <span class="option-price">+0.00</span>
                    </label>
                </div>
                <div class="option">
                    <input type="radio" id="size1" name="size" class="option-input" />
                    <label class="option-label" for="size1">
                    <span class="option-text">中号</span>
                    <span class="option-price">+3.00</span>
                    </label>
                </div>
                <div class="option">
                    <input type="radio" id="size2" name="size" class="option-input" />
                    <label class="option-label" for="size2">
                    <span class="option-text">大号</span>
                    <span class="option-price">+1.50</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="btn-row">
        <a href="javascript:;" class="btn btn-default" data-bs-dismiss="modal">取消</a>
        <a href="javascript:;" class="btn btn-success">加入购物车<i class="fa fa-plus fa-fw ms-2"></i></a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
</div>
<!--弹框选择商品 end-->

<script src="<@sp.static/>/assets/plugins/cashier/vendor.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="<@sp.static/>/assets/plugins/cashier/app.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="<@sp.static/>/assets/plugins/cashier/pos.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>